<route lang="json5" type="page">
{
  "needLogin": true,
  "style": {
    "navigationBarTitleText": "操作历史",
    "enablePullDownRefresh": true
  }
}
</route>

<script lang="ts" setup>
import { computed, ref } from 'vue'
import { onLoad, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'

// 定义操作历史记录的类型
interface HistoryRecord {
  id: number
  type: string
  operator: string
  timestamp: string
  content: string
}

type LoadMoreStatus = 'more' | 'loading' | 'noMore'

const historyList = ref<HistoryRecord[]>([])
const loadingStatus = ref<LoadMoreStatus>('more')
const page = ref(1)
const pageSize = 10
const initialLoading = ref(true)

const wdState = computed<'loading' | 'finished' | null>(() => {
  if (loadingStatus.value === 'loading') {
    return 'loading'
  }
  if (loadingStatus.value === 'noMore') {
    return historyList.value.length > 0 ? 'finished' : null
  }
  return null
})

// 模拟的操作历史数据
const mockHistory: HistoryRecord[] = [
  { id: 1, type: '登录', operator: '401-主', timestamp: '2023-10-13 08:25:23', content: '登录app' },
  { id: 2, type: '修改密码', operator: '401-主', timestamp: '2023-10-13 08:25:23', content: '修改密码' },
  { id: 3, type: '报修', operator: '401-次1', timestamp: '2023-10-13 08:25:23', content: '水表报修' },
  { id: 4, type: '充值', operator: '401-主', timestamp: '2023-10-12 10:30:00', content: '充值100元' },
  { id: 5, type: '预警设置', operator: '401-主', timestamp: '2023-10-11 15:00:45', content: '修改水表预警值为10吨' },
  { id: 6, type: '登录', operator: '401-主', timestamp: '2023-10-11 09:05:10', content: '登录app' },
  { id: 7, type: '修改手机', operator: '401-主', timestamp: '2023-10-10 18:20:30', content: '修改预警手机号' },
  { id: 8, type: '修改邮箱', operator: '401-主', timestamp: '2023-10-10 18:20:00', content: '添加预警邮箱' },
  { id: 9, type: '报修', operator: '401-次2', timestamp: '2023-10-09 11:45:12', content: '电梯报修' },
  { id: 10, type: '登录', operator: '401-主', timestamp: '2023-10-09 08:00:00', content: '登录app' },
  { id: 11, type: '充值', operator: '401-主', timestamp: '2023-10-08 14:00:00', content: '充值50元' },
]

// 模拟获取历史记录数据
async function fetchHistory(pageNum: number, num: number): Promise<HistoryRecord[]> {
  return new Promise((resolve) => {
    setTimeout(() => {
      const start = (pageNum - 1) * num
      const end = start + num
      const data = mockHistory.slice(start, end)
      resolve(data)
    }, 500)
  })
}

// 加载历史记录
async function loadHistory(reload = false) {
  if (reload) {
    page.value = 1
  }

  if (loadingStatus.value === 'noMore' && !reload)
    return

  loadingStatus.value = 'loading'

  try {
    const res = await fetchHistory(page.value, pageSize)
    if (reload) {
      historyList.value = []
    }

    if (res.length > 0) {
      historyList.value.push(...res)
      page.value++
      loadingStatus.value = 'more'
    }
    else {
      loadingStatus.value = 'noMore'
    }
  }
  catch (error) {
    console.error('Failed to fetch history:', error)
    loadingStatus.value = 'more' // Reset status on error
  }
  finally {
    if (initialLoading.value) {
      initialLoading.value = false
    }
    uni.stopPullDownRefresh()
  }
}

onLoad(() => {
  loadHistory(true)
})

// 下拉刷新
onPullDownRefresh(async () => {
  await loadHistory(true)
})

// 上拉加载
onReachBottom(() => {
  loadHistory()
})
</script>

<template>
  <view class="min-h-screen pt-3">
    <!-- 骨架屏加载状态 -->
    <template v-if="initialLoading">
      <view class="space-y-3">
        <wd-skeleton :row="3" :loading="initialLoading" />
        <wd-skeleton :row="3" :loading="initialLoading" />
        <wd-skeleton :row="3" :loading="initialLoading" />
        <wd-skeleton :row="3" :loading="initialLoading" />
      </view>
    </template>

    <!-- 无数据提示 -->
    <view v-else-if="historyList.length === 0" class="pt-10 text-center text-gray-500">
      <wd-status-tip image="search" tip="暂无操作历史" />
    </view>

    <!-- 记录列表 -->
    <template v-else>
      <wd-card v-for="record in historyList" :key="record.id" class="mb-3">
        <view class="py-3 text-sm space-y-2">
          <view>
            <text class="inline-block w-20 text-gray-500">
              操作类型：
            </text>
            <text class="font-bold">
              {{ record.type }}
            </text>
          </view>
          <view>
            <text class="inline-block w-20 text-gray-500">
              操作人：
            </text>
            <text>{{ record.operator }}</text>
          </view>
          <view>
            <text class="inline-block w-20 text-gray-500">
              操作时间：
            </text>
            <text>{{ record.timestamp }}</text>
          </view>
          <view>
            <text class="inline-block w-20 text-gray-500">
              操作内容：
            </text>
            <text>{{ record.content }}</text>
          </view>
        </view>
      </wd-card>
    </template>

    <!-- 加载更多 -->
    <wd-loadmore v-if="!initialLoading && wdState" :state="wdState" />
  </view>
</template>

<style lang="scss" scoped>
</style>
